<!--
    group: 企业管理
    name: 添加企业---企业注册信息预览（弹层）
-->
<template>
  <a-modal
    title="企业注册信息预览"
    :width="1000" :footer="false"
    @cancel="cancle"
    v-model="config.visible"
  >
    <div id="pdfContent" ref="pdfNameIcon">
      <a-form :form="form" :labelCol="{ span: 8 }"  :wrapper-col="{ span: 16 }">
        <h3>企业负责人信息</h3>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="姓名">
              <span v-if="form && form.legalInfo">{{ form.legalInfo.legalName }}</span>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="年龄">
              <span v-if="form && form.legalInfo">{{ form.legalInfo.age }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="法人实名手机号">
              <span v-if="form && form.legalInfo">{{ form.legalInfo.legalPhone }}</span>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="工商注册手机号">
              <span v-if="form && form.legalInfo">{{ form.legalInfo.businessPhone }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-form-item label="身份证" :labelCol="{ span: 4 }" :wrapper-col="{ span: 20 }">
            <p-ImgGroup v-if="config.cardList.length > 0" :value="config.cardList" :showHelp="true" />
          </a-form-item>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="身份证号">
              <span v-if="form && form.legalInfo">{{ form.legalInfo.cardNumber }}</span>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="身份证地址">
              <span v-if="form && form.legalInfo">{{ form.legalInfo.cardAddress }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="有效期">
              <span v-if="form && form.legalInfo">{{ form.legalInfo.cardTerm }}</span>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="政治面貌">
              <span v-if="form && form.legalInfo">
                {{{'1':'党员','2':'群众'}[form.legalInfo.politicsStatus] || ''}}
              </span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="文化程度">
              <span v-if="form && form.legalInfo">
                {{{'0':'初中及以下','1':'高中','2':'大专','3':'本科','4':'硕士','5':'博士及以上'}[form.legalInfo.standardCulture] || ''}}
              </span>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="电子邮箱">
              <span v-if="form && form.legalInfo">{{ form.legalInfo.email }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-divider />
        <h3>企业信息</h3>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="组织形式">
              <span v-if="form && form.baseInfo">
                {{{0:'工作室',1:'部',2:'中心'}[form.baseInfo.organizationForm] || ''}}
              </span>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="注册资金">
              <span v-if="form && form.baseInfo">
                {{ form.baseInfo.registerMoney }}万元
              </span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="企业名称1">
              <span v-if="form && form.baseInfo">{{ form.baseInfo.entName1 }}</span>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="企业名称2">
              <span v-if="form && form.baseInfo">{{ form.baseInfo.entName2 }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="企业名称3">
              <span v-if="form && form.baseInfo">{{ form.baseInfo.entName3 }}</span>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="企业名称4">
              <span v-if="form && form.baseInfo">{{ form.baseInfo.entName4 }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="企业名称5">
              <span v-if="form && form.baseInfo">{{ form.baseInfo.entName5 }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="经营范围">
              <div v-for="item in newTreeDataModel">
                <a-icon type="appstore" style="margin-right: 5px;" />
                {{ item.nodeName }} <br/>
                <span class="mLeft">{{ item.nodeNature }}</span>
                <a-divider dashed />
              </div>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col span="24">
            <a-form-item label="经营者关联信息" :labelCol="{span: 4}" :wrapperCol="{span: 20}">
              <QueryOperatorRelatedInformation v-model="qoriConfig.list" :defaultValue="qoriConfig.defaultList" :disabled="qoriConfig.disabled" :model="qoriConfig.model" :DisplayWizard="qoriConfig.DisplayWizard"></QueryOperatorRelatedInformation>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="caiConfig.show" :gutter="24">
          <a-col span="24">
            <a-form-item label="账户信息" :labelCol="{span: 4}" :wrapperCol="{span: 20}">
              <CorporateAccountInformation v-model="caiConfig.value" :disabled="caiConfig.disabled" :model="caiConfig.model" :legalInfo="caiConfig.legalInfo" :defaultLayout="{labelCol: { span: 4 }, wrapperCol: { span: 14 }}"></CorporateAccountInformation>
            </a-form-item>
          </a-col>
        </a-row>



        <a-divider />
        <h3>企业邮寄地址</h3>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="收件地址">
              <span v-if="form && form.baseInfo">{{ form.baseInfo.mailUserAddress }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="收件人">
              <span v-if="form && form.baseInfo">{{ form.baseInfo.mailUserName }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col span="12">
            <a-form-item label="手机号">
              <span v-if="form && form.baseInfo">{{ form.baseInfo.mailUserPhone }}</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <p style="display: flex;justify-content: center;align-items: flex-end;margin-top: 20px;width: 100%;">
      <a-button @click="copyPreviewLink" :loading="enterprisePreview.loadingPDF" type="primary">{{ text }}</a-button>
      <a-button @click="downFilePDF" class="mLeft btnsLine">下载预览文件</a-button>
      <a @click="cancle" class="mLeft" style="font-size: 14px">关闭</a>
    </p>
  </a-modal>
</template>

<script>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { cloneObject, conversionManyElement, copyLinkContent } from '@/utils/util'
import QueryOperatorRelatedInformation from './../components/QueryOperatorRelatedInformation.vue'
import CorporateAccountInformation from './../components/CorporateAccountInformation.vue'

export default {
  name: 'enterprisePreview',
  props:['config','newForm','newTreeDataModel'],
  components:{QueryOperatorRelatedInformation,CorporateAccountInformation},
  data(){
    return{
       // 账户信息
      caiConfig:{
        value:{'bankName':'','accNo':''},
        disabled:false, // edit 状态下可用
        model:'view', // view 表示预览模式  edit  表示可编辑模式 默认值
        legalInfo:{}, // 法人信息 {name:'', phone:'', cardNum:''}
        show:true
      },
      // 经营者关联信息查询
      qoriConfig:{
        list:{},
        disabled:false, // edit 状态下可用
        model:'view', // view 表示预览模式  edit  表示可编辑模式 默认值
        DisplayWizard:false,
        // 经营者关联信息查询  编辑回显值
        defaultList: {'entTaxPic':{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540243642_%E5%8A%9E%E5%85%AC.png',name:''},'entHirePic':{url:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/license/1688540248058_%E5%8C%97%E4%BA%AC2.png',name:''}},
      },
      text: '复制文件链接',
      form: {},
      enterprisePreview: {
        loadingPDF: false,  //预览按钮加载状态
        fileUrl: null,  //文件预览地址
      }
    }
  },
  watch: {
    'newForm': {
      handler(newVal,oldVal){
        if (newVal){
          let data = cloneObject(newVal)
          this.form = data;
          this.form.baseInfo.registerMoney = data.baseInfo && conversionManyElement(data.baseInfo.registerMoney);
          this.setDataForQC(data)
        }
      },
      deep: true
    }
  },
  methods: {
    setDataForQC(data){
      const {entHirePic, entTaxPic, entBankReq} = data
      if(!this.$IS.isNullOrUnDef(entHirePic)&& !this.$IS.isEmpty(entHirePic)){
        const {fileName,fileUrl} = entHirePic.entHirePicList[0]
        this.qoriConfig.defaultList['entHirePic'].url = fileUrl
        this.qoriConfig.defaultList['entHirePic'].name = fileName
      }
      if(!this.$IS.isNullOrUnDef(entTaxPic)&& !this.$IS.isEmpty(entTaxPic)){
        const {fileName,fileUrl} = entTaxPic.entTaxPicList[0]
        this.qoriConfig.defaultList['entTaxPic'].url = fileUrl
        this.qoriConfig.defaultList['entTaxPic'].name = fileName
      }
      if(!this.$IS.isNullOrUnDef(entBankReq)&& !this.$IS.isEmpty(entBankReq)){
        this.caiConfig.show = true
        this.caiConfig.value = {...entBankReq}
      } else {
        this.caiConfig.show = false
      }
    },
    //复制文件链接
    copyPreviewLink(){
      this.text = '正在生成链接中';
      this.enterprisePreview.loadingPDF = true;

      //处理转为PDF文件并拿到OSS文件地址
      const element = this.$refs.pdfNameIcon;
      html2canvas(element).then(canvas => {
        const contentWidth = canvas.width / 2;
        const contentHeight = canvas.height / 2;
        const PDF = new jsPDF('', 'pt', [contentWidth, contentHeight]);
        const pageData = canvas.toDataURL('image/jpeg', 1.0);
        PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);

        // 转换Blob对象
        const blob = PDF.output('blob');
        // 创建一个File实例，继承自Blob，添加文件名和文件类型
        const file = new File([blob], '企业注册信息预览.pdf', {
          type: 'application/pdf',
        });
        let action = { file };
        this.PUpLoadFileCustomRequestEvent(action,'/qsb/contract/',this).then(res=>{
          // console.log('====================>',res)
          this.enterprisePreview.fileUrl = res.url;
          this.enterprisePreview.loadingPDF = false;
          this.text = '复制文件链接';

          //复制文件链接
          let url = process.env.VUE_APP_WEB_BASE_URL + '#/user/enterprisePreviewPDF?url=' + this.enterprisePreview.fileUrl;
          copyLinkContent(url, this);

        });
      });
    },
    //下载预览文件
    downFilePDF(){
      const element = this.$refs.pdfNameIcon;
      html2canvas(element).then((canvas) => {
        const contentWidth = canvas.width / 2;
        const contentHeight = canvas.height / 2;
        const PDF = new jsPDF('', 'pt', [contentWidth, contentHeight]);
        const pageData = canvas.toDataURL('image/jpeg', 1.0);
        PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);
        PDF.save('企业注册信息预览.pdf');
      });
    },
    //关闭
    cancle(){
      this.$emit('closeFileModal');
    },
  }
}
</script>

<style scoped lang="less">
#pdfContent{
  padding: 30px 50px;
  margin-bottom: 30px;
}
.btnsLine{
  border: 1px solid #4266E5;
  color: #4266E5;
}
</style>
